<template>
  <Layout style="height: 100%" class="main">
    <Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider"
           :style="{overflow: 'hidden'}">
      <SideMenu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage"
                 :menu-list="routers">
        <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
        <div class="logo-con">
          <img v-show="!collapsed" :src="maxLogo" key="max-logo" style="width: 60px;"/>
          <img v-show="collapsed" :src="minLogo" key="min-logo" style="width: 30px;"/>
        </div>
      </SideMenu>
    </Sider>
    <Layout>
      <Header class="header-con">
        <HeaderBar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
          <user/>
        </HeaderBar>
      </Header>
      <Content class="main-content-con">
        <Layout class="main-layout-con">
          <div class="tag-nav-wrapper">
            <TagsNav :value="$route" @input="handleClick" :list="tagNavList" @on-close="handleCloseTag"/>
          </div>
          <Content class="content-wrapper">
            <router-view v-slot="{Component}">
              <keep-alive :include="cacheList">
                <component :is="Component"></component>
              </keep-alive>
            </router-view>
            <ABackTop :height="100" :bottom="80" :right="50" container=".content-wrapper"></ABackTop>
          </Content>
        </Layout>
      </Content>
    </Layout>
  </Layout>
</template>
<script setup>
import SideMenu from './components/side-menu'
import HeaderBar from './components/header-bar'
import TagsNav from './components/tags-nav'
import User from './components/user'
import ABackTop from './components/a-back-top'
import {getNewTagList, routeEqual} from '@/libs/util'
import minLogo from '@/assets/images/logo-min.svg'
import maxLogo from '@/assets/images/logo.svg'
import './main.less'
import {computed, onMounted, ref, watch} from "vue";
import config from '@/config'
import {useAppStore} from '@/stores/app.js'
import {useLoginStore} from "@/module-base/stores/login.js";
import {useRoute, useRouter} from 'vue-router'
import {storeToRefs} from "pinia";
// 路由实例
const route = useRoute()
const router = useRouter()
const appStore = useAppStore()
const {
  tagNavList,
} = storeToRefs(appStore)
const {
  routers
}= useLoginStore()
const {
  homeRoute,
  setBreadCrumb,
  setTagNavList,
  addTag,
  closeTag
} = appStore

const collapsed = ref(false)



const cacheList = computed(() => {
  const list = ['ParentView', ...tagNavList.value.length ? tagNavList.value.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : []]
  return list
})

function turnToPage(route) {
  let {name, params, query} = {}
  if (typeof route === 'string') name = route
  else {
    name = route.name
    params = route.params
    query = route.query
  }
  if (name.indexOf('isTurnByHref_') > -1) {
    window.open(name.split('_')[1])
    return
  }
  router.push({
    name,
    params,
    query
  })
}

function handleCollapsedChange(state) {
  collapsed.value = state
}

function handleCloseTag(res, type, _route) {
  if (type !== 'others') {
    if (type === 'all') {
      turnToPage(config.homeName)
    } else {
      if (routeEqual(route, _route)) {
        closeTag(_route)
      }
    }
  }
  setTagNavList(res)
}

function handleClick(item) {
  turnToPage(item)
}

const sideMenu = ref(null)
watch(() => route,
    (newRoute) => {
      const {name, query, params, meta} = newRoute
      addTag({
        route: {name, query, params, meta},
        type: 'push'
      })
      setBreadCrumb(newRoute)
      setTagNavList(getNewTagList(tagNavList.value, newRoute))
      sideMenu.value.updateOpenName(newRoute.name)
    }, {deep: true})
onMounted(() => {
  setTagNavList()
  addTag({
    route: homeRoute,
  })
  setBreadCrumb(route)
})
</script>
